<template>
    <div class="homeEdit">
        <!-- 返回按钮与编辑 -->
        <div class="pageTop">
            <div class="backRow" v-on:click="backFn()">
                <i class="iconfont icon-arrowLeft-fill"></i>
            </div>
            <div class="setEdit">
                <span>编辑</span>
            </div>
        </div>
        <!-- 个性头像 -->
        <div class="pageNav clearfix">
            <div class="username f_left">
                <span>波吉</span>
            </div>
            <div class="usericon f_right">
                 <img src="../assets/img/boji.jpg" alt="波吉">
            </div>
        </div>
        <!-- 记录天数 -->
        <div class="pageTxt">
            <span>写了0字 · 获得0喜欢</span>
            <span>读了0篇文章 · 累计打卡0天</span>
        </div>
        <!-- 总结 -->
        <div class="pageTotal">
            <ul>
                <li>
                    <a href="#" class="current">
                     <span>想法 0 </span>
                    </a>
                </li>
                 <li>
                    <a href="#">
                      <span>喜欢 0 </span>
                    </a>
                </li>
                 <li>
                    <a href="#">
                        <span>摘录 0 </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    backFn(){
        this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../assets/css/reset.css';

.homeEdit{
    .pageTop{
        height: 50px;
        display: flex;
        justify-content: space-between;
        div{
            width: 50px;
            line-height: 50px;
        }
        .backRow{
            text-align: center;
            i{
                font-size: 30px;
            }
        }
        .setEdit{
            font-size: 18px;
            font-weight: bold;
        }
    }
    .pageNav{
        height: 100px;
        div{
            width: 100px;
            height: 100px;
        }
        .username{
            margin-left: 20px;
            span{
                font-size: 30px;
                font-weight: bold;
            }
        }
        .usericon{
            border-radius: 50%;
            margin-right: 20px;
            img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
        }
    }
    .pageTxt{
       height: 100px;
       padding-left: 20px;
       color:#808080;
       border-bottom: 1px solid #ccc;
       span{
           display: block;
           font-size: 16px;
       }
    }
    .pageTotal{
        height: 50px;
        ul li{
            float: left;
            font-size: 18px;
            width: 60px;
            height: 50px;
            line-height: 50px;
            margin-left: 15px;
            a{
                color: #808080;
                &.current{
                    color: #000;
                }
            }
        }
    }
}
</style>